<template>
  <div>
    <h2>{{ msg }}</h2>
    <button @click="change">改变msg</button>
    <hr />
    <!-- 按理说，需要count.value来使用 -->
    <!-- 但是如果在模板中使用，它会自动的.value -->
    <h3>{{ count }}</h3>
    <button @click="add">count+1</button>
  </div>
</template>

<script>
// ref就是一个组合式api，说白了，就是一个函数
import { ref } from "vue";

export default {
  // setup是vue3特有的选项，作为组合式api的入口
  // 从生命周期角度看，setup是在beforeCreate之前执行
  // setup函数中，this不是组件实例，this打印出来是und
  // 使用vue3写项目，基本上用不到this。所有的东西都是通过函数获取。
  setup() {
    console.log("setup...");
    console.log("this:", this);

    // 定义一个普通的变量，不是一个响应式数据
    let msg = "hello vue3";
    // count并不是一个普通的变量，是一个响应式数据
    let count = ref(0);
    // 打印出count是一个对象，里面有一个value
    // value代表这个响应式数据
    // console.log("--count:", count);

    const change = () => {
      msg = "hi vue3";
    };

    const add = () => {
      // 在模板中使用，不需要.value
      // 但是在js中，使用需要.value
      count.value++;
    };

    // 返回的数据或方法是给模板使用的
    return {
      msg,
      change,
      count,
      add,
    };
  },

  beforeCreate() {
    console.log("beforeCreate...");
  },
};
</script>

<style scoped>
</style>
